一般的引用antd中的组件我们需要
import {Button} from 'antd'
class App extends React.Component{
render(){
return(
<div>
<Button/>
</div>
)
}
}
如上代码所示,需要把import的组件放在我们的render中去渲染,
import {message,Button} from 'antd'
class App extends React.Component{
handleClick=()=>{
message.success('注册成功!', 2)
}
render(){
return(
<div>
<Button onClick={this.handleClick}/>
</div>
)
}
}
像message这种组件,我们就可以当作一个方法调用,然后出现相应提示界面,其原理是利用React.createElement()方法,传入相应的html标签和元素类型内容,然后也是插入到Root根节点message对应实例方法如下
getMessageInstance(function (instance) {
var iconNode = React.createElement(_icon["default"], {
type: iconType,
theme: iconType === 'loading' ? 'outlined' : 'filled'
});
instance.notice({
key: target,
duration: duration,
style: {},
content: React.createElement("div", {
className: "".concat(prefixCls, "-custom-content").concat(args.type ? " ".concat(prefixCls, "-").concat(args.type) : '')
}, args.icon ? args.icon : iconType ? iconNode : '', React.createElement("span", null, args.content)),
onClose: callback
});
});
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。